<template>
  <div class="app-container">
    <!-- <div>
      <div style="display: flex;justify-content: space-between;padding: 0 40px;">
        <div class="title">
          <div style="margin-bottom: 10px;">{{ item.name }}</div>
          <div>{{ item.description }}</div>

        </div>
        <div> {{ item.type == 1 ? '填报类报表' : '汇总类报表' }} </div>
      </div>
      <el-divider />
    </div> -->
    <!-- <el-page-header :content="详情页面" @back="goBack" /> -->
    <div class="univer-container" style="display: flex;justify-content: center;">
      <UniverSheet v-if="univerVisible" id="sheet" ref="univerRef" style="width: 100%" :data="table" />
      <!-- <div ref="dataUniver" class="univer-container" /> -->
      <!-- <el-button @click="save">保存</el-button> -->
    </div>
    <div class="detail-btn">
      <el-button class="btn" style="width: 120px" type="primary" @click="handlleExport">导出</el-button>
      <el-button v-if="this.$route.query.type === 'edit'" class="btn" style="width: 120px" type="primary" @click="handlleUpdate">更新</el-button>
      <el-button
        type="primary"
        style="width: 120px"
        @click="goBack"
      >返回</el-button>
    </div>
  </div>
</template>
<script>
import store from '@/store'
// import { FUniver } from '@univerjs/facade'
import { aggregateFixExport } from '@/api/common'
import { getAggregateFixReportDetail, getAggregateFixReportUpdate } from '@/api/table'
import UniverSheet from '@/components/Univer/UniverSheet.vue'
export default {
  components: {
    UniverSheet
  },
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      data: {},
      univerVisible: false,
      table: {}
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getAggregateFixReportDetail({ id: this.$route.query.id }).then((res) => {
        this.table = res.data.data
        this.univerVisible = true
      })
    },
    exportExcel(data, name) {
      const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = name
      a.click()
      window.URL.revokeObjectURL(url)
    },
    handlleUpdate() {
      const savedData = this.$refs.univerRef?.getData()
      // console.log(savedData, '------------------------savedData')
      getAggregateFixReportUpdate({ id: this.$route.query.id, data: savedData }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
          // this.$emit('updateResult')
          this.$router.push('/report/municipality')
        }
      })
    },
    handlleExport() {
      aggregateFixExport({ id: this.$route.query.id }).then(res => {
        this.exportExcel(res, store.state.settings.filename)
      })
    },
    goBack() {
      this.$router.push('/report/municipality')
      // this.$emit('goBack')
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ff7a8c;
  }
}
.detail-btn {
  margin-top: 40px;
  text-align: center;
}
.univer-container {
  margin-top: 20px;
  padding: 0px;
  // width: 100%;
  // height: 100vh;
  bottom: 0px;
}
</style>
<style >
.univer-formula-box {
    /* display: none; */
  }
</style>
